<template>
  <div class="container">
    <div class="mainContent">
      <div class="questionArea">
        <div class="topTitle">
          <img v-if="questionDetail.avatar" class="leftAvatar" :src="questionDetail.avatar" alt="">
          <img v-else class="leftAvatar" src="/static/images/defaultAvatar.png" alt="">
          <div class="rightContent">
            <div class="name">{{ questionDetail.name }}</div>
            <div class="date">{{ quesTime }}</div>
          </div>
        </div>
        <div class="quesContent">{{ questionDetail.content }}</div>
        <div class="tagList">
          <div v-show="questionDetail.type && questionDetail.type !== ''" class="singleTag">{{ questionDetail.type }}</div>
          <div v-show="questionDetail.title && questionDetail.title !== ''" class="singleTag">{{ questionDetail.title }}</div>
          <div v-show="gradeAndClass !== ''" class="singleTag">{{ gradeAndClass }}</div>
        </div>
      </div>
      <div v-show="hasAns" class="answerArea">
        <div class="tip">回复</div>
        <div class="ansUserMsg">
          <img class="userAvatar" src="/static/images/defaultAvatar.png" alt="">
          <div class="userArea">
            <div class="name">{{ ansDetail.name }}</div>
            <div class="date">{{ ansTime }}</div>
          </div>

        </div>
        <div class="ansContent">{{ ansDetail.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  onLoad (option) {
    this.questionId = option.id
  },
  data () {
    return {
      questionId: null,
      questionDetail: {},
      ansDetail: {},
      quesTime: null,
      ansTime: null,
      hasAns: false,
      gradeAndClass: ''
    }
  },
  mounted () {
    this.getQuestionDetail()
  },
  methods: {
    getQuestionDetail () {
      this.$httpWX.post({
        url: '/academy/teacher/myDetails',
        data: {
          id: this.questionId
        },
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        this.questionDetail = res.data.questionVo
        const questionVo = res.data.questionVo
        this.ansDetail = res.data.answerVos.length > 0 ? res.data.answerVos[0] : {}
        if (res.data.answerVos.length > 0) {
          this.hasAns = true
        } else {
          this.hasAns = false
        }
        this.quesTime = this.formatDate(this.questionDetail.createTime)
        this.ansTime = this.formatDate(this.ansDetail.createTime)
        const grade = questionVo.gradeId === 1 ? '高一' : (questionVo.gradeId === 2 ? '高二' : '高三')
        this.gradeAndClass = grade + questionVo.className
      })
    },
    formatDate (dates) {
      const myDate = new Date(dates)
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const date = myDate.getDate()
      const hours = myDate.getHours()
      const minutes = myDate.getMinutes() >= 10 ? myDate.getMinutes() : '0' + myDate.getMinutes()
      const seconds = myDate.getSeconds() >= 10 ? myDate.getSeconds() : '0' + myDate.getSeconds()
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    background: #FAFAFA;
    height: 100vh;
    .questionArea {
      width: 100%;
      height: 400rpx;
      padding: 30rpx 60rpx;
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 27rpx;
      .topTitle {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 59rpx;
        .leftAvatar {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          margin-right: 31rpx;
        }
        .rightContent {
          padding-top: 11rpx;
          flex:1;
          .name {
            color: #171717;
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          .date {
            color: #C5C4C4;
            font-size: 24rpx;
          }
        }
      }
      .quesContent {
        color: #171717;
        font-size: 28rpx;
        font-weight: bold;
        line-height: 48rpx;
        margin-bottom: 30rpx;

        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .tagList {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .singleTag {
          // width: 130rpx;
          height: 50rpx;
          padding:0 20rpx;
          line-height: 50rpx;
          border-radius: 25rpx;
          margin-right: 20rpx;
          background: #F7F7FA;
          color: #999;
          font-size: 24rpx;
          text-align: center;
        }
      }
    }
    .answerArea {
      width: 100%;
      height: 780rpx;
      background: #fff;
      padding: 60rpx 78rpx 0 58rpx;
      box-sizing: border-box;
      .tip {
        color: #171717;
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 42rpx;
      }
      .ansUserMsg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 59rpx;
        .userAvatar {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          margin-right: 31rpx;
        }
        .userArea {
          padding-top: 11rpx;
          .name {
            color: #171717;
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 33rpx;
          }
          .date {
            color: #C5C4C4;
            font-size: 24rpx;
          }
        }
      }
      .ansContent {
        color: #171717;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
</style>
